import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Header from '../components/header/index';
import LeftMenu from '../components/menu/index';
import { CodeEditor,isTextFile } from '@components/CodeEditor';
import MarkdownRenderer from '@components/MarkdownRenderer';

import axios from 'axios';
import Qs from 'qs';

import { Tree, message } from 'antd';
import { FileTextOutlined,FolderOutlined,CloseOutlined } from '@ant-design/icons';
import { withTranslation } from 'react-i18next';
import CommentList from './discuss';
import AppStoreSvg from '../img/appstore.svg';
import CardDefaultPng from '../img/cardDefault.png';
import CardDefaultPng1 from '../img/cardDefault1.png';
import RunSvg from '../img/run.svg';

import './waxberryDetail.scss';
import './markdown.scss';
const MarketIcon=({width,height})=><svg  version="1.1" width={width} height={height} viewBox="0 0 18 18"><defs><clipPath id="master_svg0_280_29827/385_77512"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_280_29827/385_77512)"><g><path d="M8.99999875,0.8555145263671875C13.49806875,0.8555145263671875,17.14456875,4.502024526367188,17.14456875,9.000044526367187C17.14456875,13.498114526367187,13.49806875,17.14461452636719,8.99999875,17.14461452636719C4.50197875,17.14461452636719,0.85546875,13.498114526367187,0.85546875,9.000044526367187C0.85546875,4.502024526367188,4.50197875,0.8555145263671875,8.99999875,0.8555145263671875ZM11.84736875,5.110424526367187L7.70501875,6.601684526367188C7.19113875,6.786734526367187,6.78658875,7.191354526367188,6.60163875,7.705264526367188L5.11037875,11.847414526367187C5.00341875,12.144214526367188,5.07757875,12.476214526367187,5.30071875,12.699314526367187C5.52384875,12.922514526367188,5.85578875,12.996614526367187,6.15266875,12.889714526367188L10.29497875,11.398414526367187C10.80885875,11.213314526367187,11.21336875,10.808734526367187,11.39836875,10.294824526367188L12.88966875,6.152714526367188C12.99656875,5.855834526367188,12.92246875,5.5238945263671875,12.69926875,5.300754526367188C12.47616875,5.077624526367187,12.14416875,5.003464526367187,11.84736875,5.110424526367187ZM8.99999875,10.018114526367187C9.56225875,10.018114526367187,10.01806875,9.562304526367187,10.01806875,9.000044526367187C10.01806875,8.437784526367189,9.56225875,7.981984526367188,8.99999875,7.981974526367187C8.437738750000001,7.981984526367188,7.98193875,8.437784526367189,7.98193875,9.000044526367187C7.98193875,9.562304526367187,8.437738750000001,10.018114526367187,8.99999875,10.018114526367187Z" fill="currentColor" /></g></g></svg>
const TreeNode = Tree.TreeNode;
const urlObj = Qs.parse(window.location.search.split('?')[1]);

function copy() {
    let content = location.href;
    if(navigator.clipboard){
        navigator.clipboard.writeText(content);
        message.success("地址已复制到剪切板");
    }else{
        let inputDom = document.createElement('textarea');
        inputDom.value = content;
        document.body.appendChild(inputDom);
        inputDom.select();
        const result = document.execCommand('copy');
        // 判断是否复制成功
        if (result) {
            message.success("地址已复制到剪切板");
        }
        document.body.removeChild(inputDom);
    }
}
function downloadFile(url) {
    if(!url) return
    const link = document.createElement('a');
    link.href = url;
    link.download = ''; // 不设置则使用服务器返回的文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            waxberryObj: {},
            selectMenu: "detail",
            codeTreeData: [],
            codeData: "",
            codeLogs: "",
            expandedKeys: [],
            selectedKeys: [],
            monacoLanguage: ''
        };
    }

    componentWillMount() {
        this.getWaxberryById(urlObj.id);
    }

    componentDidMount() {

    }

    getWaxberryById(id){
        axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/agent/agent/findById?id=${id}`).then(res=>{
            if(res.data.code === 200){
                this.setState({
                    waxberryObj: res.data.data
                },()=>{
                    this.getWaxberryDetail();
                    this.getCodeTree();
                });
            }
        });
    }

    menuChange(key) {
        this.setState({
            selectMenu: key
        })
    }

    showCustomModal() {
        this.setState({
            showCustomModal: true
        })
    }

    hideCustomModal() {
        this.setState({
            showCustomModal: false
        })
    }

    customModalOk() {
        let waxberryObj = this.state.waxberryObj;
        if(waxberryObj.type === 0){
            window.open(`/waxberry?id=${waxberryObj.id}`,"_self");
        }
        if(waxberryObj.type === 1){
            window.open(`/agent?id=${waxberryObj.id}`,"_self");
        }
    }

    run() {
        let waxberryObj = this.state.waxberryObj;
        axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/agent/agent/agentRunRecord?vesselId=${waxberryObj.vesselId}`).then(res=>{
            if (res.data.code === 200) {
                waxberryObj.runCount += 1;
                this.setState({
                    waxberryObj
                })
            }
        });
        if(waxberryObj.type === 0){
            window.open(globalInitConfig.REACT_APP_RUN_URL.replace('ID',waxberryObj.id.toLowerCase()));
        }
        if(waxberryObj.type === 1){
            window.open(`/agent_run?id=${waxberryObj.id}`);
        }
    }

    getWaxberryDetail(){
        let waxberryObj = this.state.waxberryObj;
        axios.get(`${globalInitConfig.REACT_APP_API_SBX_URL}/sandboxes/${waxberryObj.vesselId}/read_file?path=/waxberry/README.md`).then(res => {
            const data = res.data;
            if (data) {
                waxberryObj.detail = data;
                this.setState({
                    waxberryObj
                });
            }
        });
    }

    treeSelect(selectedKeys,{node}) {
        if(node.type !== "file") return;
        let split = node.fileName.split('.');
        let language = split.length === 1 ? "javascript" : split.pop();
        this.setState({
            selectedKeys,
            monacoLanguage: language
        },()=>{
            this.getCodeData();
        });
    }

    treeExpand(expandedKeys) {
        this.setState({
            expandedKeys
        });
    }

    getCodeTree(){
        let waxberryObj = this.state.waxberryObj;
        axios.get(`${globalInitConfig.REACT_APP_API_SBX_URL}/sandboxes/${waxberryObj.vesselId}/tree?path=/waxberry`).then(res => {
            const data = res.data;
            if (data.data) {
                this.setState({
                    codeTreeData: [data.data]
                });
            } else {
                message.error(data.message);
            }
        });
    }

    getCodeData(){
        let waxberryObj = this.state.waxberryObj;
        let selectedKeys = this.state.selectedKeys;
        if(selectedKeys.length===0){
            return;
        }
        axios.get(`${globalInitConfig.REACT_APP_API_SBX_URL}/sandboxes/${waxberryObj.vesselId}/read_file?path=${selectedKeys[0]}`).then(res => {
            const data = res.data;
            if (data) {
                this.setState({
                    codeData: data
                });
            }
        });
    }

    like(waxberryObj,value) {
        axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/agent/agent/saveAgentLike?id=${waxberryObj.id}`).then(res => {
            const data = res.data;
            if (data.code === 200) {
                waxberryObj.isLike = value;
                this.forceUpdate();
            } else {
                message.error(data.message);
            }
        });
    }

    star(waxberryObj,value) {
        axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/agent/agent/saveAgentCollect?id=${waxberryObj.id}`).then(res => {
            const data = res.data;
            if (data.code === 200) {
                waxberryObj.isCollect = value;
                this.forceUpdate();
            } else {
                message.error(data.message);
            }
        });
    }

    render() {
        const { waxberryObj,selectMenu,showCustomModal,codeTreeData,expandedKeys,selectedKeys,codeData,codeLogs,monacoLanguage } = this.state;
        const { t } = this.props;

        const loop = data => data.map((item) => {
            let title = <span>{item.type==="file"?<FileTextOutlined />:<FolderOutlined />}{item.name}</span>;
            if (item.children && item.children.length) {
                return <TreeNode key={item.path} title={title} fileName={item.name} type={item.type}>{loop(item.children)}</TreeNode>;
            }
            return <TreeNode key={item.path} title={title} fileName={item.name} type={item.type}/>;
        });

        return (
            <div className="my-app-detail">
                <Header/>
                <div className="app-content">
                    <LeftMenu menu="appStore"/>
                    <div className="app-content-right right_bj">
                        <div className="content-header">
                        <MarketIcon width={24} height={24}/>{t('menu.waxberryPlaza')}
                        </div>
                        <div className="content-detail">
                            {waxberryObj.ismodify === 0 && <span className="custom">{t('waxberryPlaza.customizable')}</span>}
                            <img src={waxberryObj.coverFileId ? `${globalInitConfig.REACT_APP_API_FS_URL}file/download/${waxberryObj.coverFileId}` : CardDefaultPng} width="450" height="280"/>
                            <div className="infoDiv">
                                <div className="info">
                                    <span className="title">{waxberryObj.name}</span>
                                    <span className="author">{t('waxberryPlaza.author')}：<img src={waxberryObj.avatarUrl ? `${globalInitConfig.REACT_APP_API_FS_URL}file/download/${waxberryObj.avatarUrl}` : CardDefaultPng1} width={20} height={20}/>{waxberryObj.creatorName}</span>
                                    <span className="desc">{t('waxberryForm.introduction')}：{waxberryObj.discription}</span>
                                    <span onClick={()=>downloadFile(waxberryObj.fileId?`${globalInitConfig.REACT_APP_API_FS_URL}file/download/${waxberryObj.fileId}`:null)} style={waxberryObj.fileId?{cursor:'pointer'}:null} className="attachment">{t('waxberryPlaza.attachment')}：{waxberryObj.fileName||t('waxberryPlaza.noAttachment')}</span>
                                    <div className="card-tags">
                                        {waxberryObj.agentLabel && waxberryObj.agentLabel.split(",").map(item=>(
                                            <span className="tag" key={item}>{item}</span>
                                        ))}
                                    </div>
                                </div>
                                <div className="info-footer">
                                    <div className="info-data">
                                        <div className="data" onClick={()=>copy()}>
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_721_87403"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_721_87403)"><g><path d="M6.1671571875,8.75806625L10.5561571875,11.75985625Q11.3897671875,10.95675625,12.5614671875,11.11965625Q13.8000671875,11.29175625,14.3808671875,12.39925625Q14.9615671875,13.50675625,14.3988671875,14.62345625Q13.8361671875,15.74025625,12.6005671875,15.93245625Q11.3648671875,16.12465625,10.4895271875,15.23155625Q9.6499671875,14.37505625,9.8151871875,13.20715625L5.3650571875,10.16295625Q4.6950971875,10.75055625,3.7883871875,10.75675625Q2.8172671874999997,10.76335625,2.1086231875,10.09925625Q1.3999802875,9.43524625,1.3435311075,8.46574625Q1.2870815875,7.49624625,1.9138691875,6.75444625Q2.5406571875,6.01265625,3.5059871875,5.90651625Q4.4129671875,5.80678625,5.1501671875,6.31972625L9.8382071875,2.93458625Q9.6038571875,1.78070625,10.3889371875,0.87579125Q11.2088471875,-0.06926775,12.4544671875,0.04812775Q13.7001671875,0.16552225,14.3290671875,1.24712625Q14.9579671875,2.32872625,14.4437671875,3.46937625Q13.9296671875,4.61001625,12.7027671875,4.85510625Q11.5398671875,5.08740625,10.6590871875,4.33095625L6.1025671875,7.62374625Q6.2729871875,8.18273625,6.1671571875,8.75806625ZM11.6478671875,3.05110625Q11.4077671875,2.81107625,11.4077671875,2.47162625Q11.4077671875,2.13217625,11.6478671875,1.89214625Q11.8878671875,1.65211625,12.2273671875,1.65211625Q12.5667671875,1.65211625,12.8067671875,1.89214625Q13.0468671875,2.13217625,13.0468671875,2.47162625Q13.0468671875,2.81107625,12.8067671875,3.05110625Q12.5667671875,3.29113625,12.2273671875,3.29113625Q11.8878671875,3.29113625,11.6478671875,3.05110625ZM3.1928271875,8.90458625Q2.9527971875,8.66455625,2.9527971875,8.32509625Q2.9527971875,7.98564625,3.1928271875,7.74561625Q3.4328571875,7.50558625,3.7723071875,7.50558625Q4.1117571875,7.50559625,4.351787187499999,7.74561625Q4.5918171875,7.98564625,4.5918171875,8.32509625Q4.5918171875,8.66455625,4.351787187499999,8.90458625Q4.1117671875,9.14461625,3.7723071875,9.14461625Q3.4328571875,9.14461625,3.1928271875,8.90458625ZM11.6478671875,14.10765625Q11.4077671875,13.86765625,11.4077671875,13.52815625Q11.4077671875,13.18875625,11.6478671875,12.94875625Q11.8878671875,12.70865625,12.2273671875,12.70865625Q12.5667671875,12.70865625,12.8067671875,12.94875625Q13.0468671875,13.18875625,13.0468671875,13.52815625Q13.0468671875,13.86765625,12.8067671875,14.10765625Q12.5667671875,14.34765625,12.2273671875,14.34765625Q11.8878671875,14.34765625,11.6478671875,14.10765625Z" fill="currentColor"/></g></g></svg>
                                        </div>
                                        {waxberryObj.isLike === 0 ?
                                            <div className="data" onClick={()=>this.like(waxberryObj,1)}>
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_41_9670"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_41_9670)"><g><path d="M12.15,3.49899C14.789,1.605491,18.4285,1.8724910000000001,20.778,4.24899C22.0405,5.52699,22.75,7.26899,22.75,9.085989999999999C22.75,10.90299,22.04,12.645,20.779,13.922L13.8785,20.942C13.3886,21.4569,12.7092,21.7488,11.9985,21.75C11.2911,21.7494,10.61456,21.4601,10.1255,20.949L3.2184999999999997,13.9165C1.9585,12.6385,1.25,10.89799,1.25,9.082989999999999C1.25,7.26799,1.9585,5.52699,3.2190000000000003,4.24849C5.568,1.87249,9.208,1.60549,11.847,3.49899L11.998,3.61099L12.15,3.49899ZM19.711,5.302989999999999C17.7275,3.29699,14.5745,3.2254899999999997,12.508,5.13999L11.998,5.6119900000000005L11.489,5.13999C9.422,3.2254899999999997,6.269,3.29699,4.2865,5.302490000000001C3.304,6.29849,2.75,7.66049,2.75,9.08249C2.75,10.50499,3.304,11.86699,4.2875,12.864L11.2025,19.905C11.4145,20.1265,11.701,20.25,11.9985,20.25C12.296,20.25,12.5825,20.1265,12.8015,19.8975L19.71,12.869C20.6945,11.87299,21.2495,10.50999,21.2495,9.085989999999999C21.2495,7.66249,20.6945,6.29899,19.7105,5.302989999999999L19.711,5.302989999999999Z" fill="currentColor"/></g></g></svg>
                                                {t('waxberryPlaza.like')}
                                            </div> :
                                            <div className="data" onClick={()=>this.like(waxberryObj,0)}>
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_140_80743"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_140_80743)"><g><path d="M12.146459375,3.7016818750000002C14.722659375,1.853251875,18.275459375,2.113897875,20.569059375,4.433831875C21.801559375,5.681421875,22.494159375,7.381951875,22.494159375,9.155711875C22.494159375,10.929461875,21.801059375,12.630021875,20.570059375,13.876621875L13.833759375,20.729521875C13.355459375,21.232121875,12.692359375,21.517121875,11.998559375,21.518321875C11.307959375,21.517721875,10.647529375,21.235321875,10.170119375,20.736321875L3.427509375,13.871221875C2.197496375,12.623621875,1.505859375,10.924581875,1.505859375,9.152781874999999C1.505859375,7.380981875,2.197496375,5.681411875,3.4279993749999997,4.433341875C5.721089375,2.113896875,9.274449375,1.853251875,11.850659375,3.7016818750000002L11.998059375,3.811021875L12.146459375,3.7016818750000002Z" fill="#F76965"/></g></g></svg>
                                                {t('waxberryPlaza.like')}
                                            </div>
                                        }
                                        {waxberryObj.isCollect === 0 ?
                                            <div className="data" onClick={()=>this.star(waxberryObj,1)}>
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_41_15071"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_41_15071)"><g><path d="M22.1820734375,9.5435434375C22.0951734375,9.2844034375,21.8710734375,9.094623437500001,21.6002734375,9.0530034375L15.4334734375,8.1011134375L12.6777734375,2.2014764375C12.5580734375,1.9452574375,12.3011734375,1.7810169455,12.0178734375,1.7802734375Q12.0171734375,1.7802734375,12.0164734375,1.7802734375C11.7346934375,1.7802734375,11.4777334375,1.9430514375,11.3565734375,2.1985494375L8.572943437500001,8.0920034375L2.3873734375,9.0179634375C2.1201944375,9.0639434375,1.9004794375,9.2537534375,1.8165365375,9.5114334375C1.7318499375,9.7683934375,1.7982850375,10.0516134375,1.9866294375,10.2457934375L6.4679434375,14.8555734375L5.398533437499999,21.3508734375C5.3532734375,21.6260734375,5.4693334375,21.9041734375,5.6978234375,22.0655734375C5.9255734375,22.2268734375,6.2263334375,22.2443734375,6.4708634375,22.1093734375L11.9872734375,19.0748734375L17.4919734375,22.1282734375C17.6022734375,22.1896734375,17.7241734375,22.2202734375,17.8460734375,22.2202734375C17.9934734375,22.2202734375,18.1402734375,22.1764734375,18.2650734375,22.0866734375C18.4934734375,21.9260734375,18.6110734375,21.6486734375,18.5664734375,21.3727734375L17.5189734375,14.8745734375L22.0112734375,10.2844534375C22.2017734375,10.0895634375,22.2681734375,9.8026934375,22.1820734375,9.5435434375ZM16.2181734375,14.1175734375C16.056873437500002,14.2825734375,15.9823734375,14.5153734375,16.0195734375,14.7438734375L16.8867734375,20.1222734375L12.3434734375,17.602473437500002C12.1244734375,17.4797734375,11.8572734375,17.4797734375,11.6375934375,17.600973437500002L7.0840134375,20.1062734375L7.9694734375,14.7299734375C8.006693437500001,14.5022734375,7.9337134375,14.2693734375,7.7723734375,14.1029734375L4.0006134375,10.2231534375L9.1605234375,9.4804934375C9.2119034375,9.4716234375,9.2610434375,9.457513437500001,9.3075934375,9.4389734375C9.4874734375,9.3773134375,9.6432434375,9.2460034375,9.7309034375,9.0603034375L12.0135734375,4.2278634375L14.2764734375,9.0726934375C14.3800734375,9.2931534375,14.5859734375,9.447903437499999,14.8268734375,9.4851234375L19.9745734375,10.2793434375L16.2181734375,14.1175734375Z" fill="currentColor"/></g></g></svg>
                                                {t('waxberryPlaza.favorite')}
                                            </div> :
                                            <div className="data" onClick={()=>this.star(waxberryObj,0)}>
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_140_80750"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_140_80750)"><g><path d="M22.1820734375,9.5435434375C22.0951734375,9.2844034375,21.8710734375,9.094623437500001,21.6002734375,9.0530034375L15.4334734375,8.1011134375L12.6777734375,2.2014764375C12.5580734375,1.9452574375,12.3011734375,1.7810169455,12.0178734375,1.7802734375Q12.0171734375,1.7802734375,12.0164734375,1.7802734375C11.7346934375,1.7802734375,11.4777334375,1.9430514375,11.3565734375,2.1985494375L8.572943437500001,8.0920034375L2.3873734375,9.0179634375C2.1201944375,9.0639434375,1.9004794375,9.2537534375,1.8165365375,9.5114334375C1.7318499375,9.7683934375,1.7982850375,10.0516134375,1.9866294375,10.2457934375L6.4679434375,14.8555734375L5.398533437499999,21.3508734375C5.3532734375,21.6260734375,5.4693334375,21.9041734375,5.6978234375,22.0655734375C5.9255734375,22.2268734375,6.2263334375,22.2443734375,6.4708634375,22.1093734375L11.9872734375,19.0748734375L17.4919734375,22.1282734375C17.6022734375,22.1896734375,17.7241734375,22.2202734375,17.8460734375,22.2202734375C17.9934734375,22.2202734375,18.1402734375,22.1764734375,18.2650734375,22.0866734375C18.4934734375,21.9260734375,18.6110734375,21.6486734375,18.5664734375,21.3727734375L17.5189734375,14.8745734375L22.0112734375,10.2844534375C22.2017734375,10.0895634375,22.2681734375,9.8026934375,22.1820734375,9.5435434375Z" fill="#FFCD44"/></g></g></svg>
                                                {t('waxberryPlaza.favorite')}
                                            </div>
                                        }
                                    </div>
                                    {waxberryObj.ismodify === 0 && <div className="customDiv" onClick={()=>this.showCustomModal()}>
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_26_55292"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_26_55292)"><g><path d="M12.933409375,7.99990234375L15.400109375,5.53323234375C16.066709375,4.86657234375,16.066709375,3.79990234375,15.400109375,3.19990234375L12.800109375,0.59990234375C12.200109375,-0.00009765624999999445,11.066709375,-0.00009765624999999445,10.466709375,0.59990234375L8.000069374999999,3.06657234375L5.533409375,0.59990234375C4.933409375,-0.00009765624999999445,3.800069375,-0.00009765624999999445,3.200069375,0.59990234375L0.600072375,3.19990234375C-0.066594625,3.86657234375,-0.066594625,4.93323234375,0.600072375,5.53323234375L3.066739375,7.99990234375L2.000069375,8.99990234375C1.800069375,9.19990234375,1.666739375,9.39990234375,1.600069375,9.66657234375L0.133405675,13.73320234375C-0.066594625,14.26660234375,0.066738975,14.79990234375,0.333405375,15.19990234375C0.666739375,15.59990234375,1.133409375,15.86660234375,1.666739375,15.86660234375C1.866739375,15.86660234375,2.000069375,15.86660234375,2.200069375,15.79990234375L6.266739375,14.33320234375C6.533409375,14.26660234375,6.733409375,14.13320234375,6.933409375,13.93320234375L7.933409375,12.93320234375L10.400109375,15.39990234375C10.733409375,15.73320234375,11.133409375,15.86660234375,11.600109375,15.86660234375C12.066709375,15.86660234375,12.466709375,15.66660234375,12.800109375,15.39990234375L15.400109375,12.79990234375C16.066709375,12.13320234375,16.066709375,11.06660234375,15.400109375,10.46660234375L12.933409375,7.99990234375ZM11.666709375,1.39990234375C11.733409375,1.39990234375,11.866709375,1.46657234375,11.933409375,1.46657234375L14.533409375,4.06657234375C14.666709375,4.19990234375,14.666709375,4.39990234375,14.533409375,4.53323234375L13.600109375,5.46657234375L10.533409375,2.39990234375L11.466709375,1.46657234375Q11.533409375,1.39990234375,11.666709375,1.39990234375ZM3.133409375,6.19990234375L4.333409375,4.99990234375C4.533409375,4.79990234375,4.533409375,4.46657234375,4.333409375,4.26657234375C4.133409375,4.06657234375,3.800069375,4.06657234375,3.600069375,4.26657234375L2.400069375,5.46657234375L1.533409375,4.59990234375C1.400069375,4.46657234375,1.400069375,4.26657234375,1.533409375,4.1332323437500005L4.133409375,1.53323234375C4.200069375,1.46657234375,4.266739375,1.46657234375,4.400069375,1.46657234375C4.533409375,1.46657234375,4.600069375,1.53323234375,4.666739375,1.53323234375L7.066739375,3.99990234375L4.000069375,7.06657234375L3.133409375,6.19990234375ZM6.066739375,13.06660234375Q6.000069375,13.13320234375,5.933409375,13.13320234375L1.866739375,14.59990234375C1.733409375,14.66660234375,1.600069375,14.59990234375,1.533409375,14.46660234375C1.466739375,14.39990234375,1.466739375,14.33320234375,1.466739375,14.19990234375L2.933409375,10.13323234375C2.933409375,10.06657234375,3.000069375,10.06657234375,3.000069375,9.99990234375L4.466739375,8.53324234375L8.466739375,4.53323234375L9.800069375,3.19990234375L12.866709375,6.26657234375L11.533409375,7.59990234375L7.533409375,11.59990234375L6.066739375,13.06660234375ZM14.466709375,11.86660234375L11.866709375,14.46660234375C11.733409375,14.59990234375,11.533409375,14.59990234375,11.400109375,14.46660234375L10.533409375,13.59990234375L11.733409375,12.39990234375C11.933409375,12.19990234375,11.933409375,11.86660234375,11.733409375,11.66660234375C11.533409375,11.46660234375,11.200109375,11.46660234375,11.000109375,11.66660234375L9.800069375,12.86660234375L8.933409375,11.99990234375L12.000109375,8.93323234375L14.466709375,11.39990234375C14.600109375,11.53320234375,14.600109375,11.73320234375,14.466709375,11.86660234375Z" fill="currentColor"/></g></g></svg>
                                        {t('waxberryPlaza.customized')}
                                    </div>}
                                    <div className="runDiv">
                                        <div className="run" onClick={()=>this.run()}><img src={RunSvg}/>{t('run')}</div>
                                        <div className="count">{waxberryObj.runCount || 0}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="content-footer">
                            <div className="footer-header">
                                <div className={selectMenu==="detail"?"menu menu-active":"menu"} onClick={()=>this.menuChange("detail")}>
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_26_55292"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_26_55292)"><g><path d="M12.933409375,7.99990234375L15.400109375,5.53323234375C16.066709375,4.86657234375,16.066709375,3.79990234375,15.400109375,3.19990234375L12.800109375,0.59990234375C12.200109375,-0.00009765624999999445,11.066709375,-0.00009765624999999445,10.466709375,0.59990234375L8.000069374999999,3.06657234375L5.533409375,0.59990234375C4.933409375,-0.00009765624999999445,3.800069375,-0.00009765624999999445,3.200069375,0.59990234375L0.600072375,3.19990234375C-0.066594625,3.86657234375,-0.066594625,4.93323234375,0.600072375,5.53323234375L3.066739375,7.99990234375L2.000069375,8.99990234375C1.800069375,9.19990234375,1.666739375,9.39990234375,1.600069375,9.66657234375L0.133405675,13.73320234375C-0.066594625,14.26660234375,0.066738975,14.79990234375,0.333405375,15.19990234375C0.666739375,15.59990234375,1.133409375,15.86660234375,1.666739375,15.86660234375C1.866739375,15.86660234375,2.000069375,15.86660234375,2.200069375,15.79990234375L6.266739375,14.33320234375C6.533409375,14.26660234375,6.733409375,14.13320234375,6.933409375,13.93320234375L7.933409375,12.93320234375L10.400109375,15.39990234375C10.733409375,15.73320234375,11.133409375,15.86660234375,11.600109375,15.86660234375C12.066709375,15.86660234375,12.466709375,15.66660234375,12.800109375,15.39990234375L15.400109375,12.79990234375C16.066709375,12.13320234375,16.066709375,11.06660234375,15.400109375,10.46660234375L12.933409375,7.99990234375ZM11.666709375,1.39990234375C11.733409375,1.39990234375,11.866709375,1.46657234375,11.933409375,1.46657234375L14.533409375,4.06657234375C14.666709375,4.19990234375,14.666709375,4.39990234375,14.533409375,4.53323234375L13.600109375,5.46657234375L10.533409375,2.39990234375L11.466709375,1.46657234375Q11.533409375,1.39990234375,11.666709375,1.39990234375ZM3.133409375,6.19990234375L4.333409375,4.99990234375C4.533409375,4.79990234375,4.533409375,4.46657234375,4.333409375,4.26657234375C4.133409375,4.06657234375,3.800069375,4.06657234375,3.600069375,4.26657234375L2.400069375,5.46657234375L1.533409375,4.59990234375C1.400069375,4.46657234375,1.400069375,4.26657234375,1.533409375,4.1332323437500005L4.133409375,1.53323234375C4.200069375,1.46657234375,4.266739375,1.46657234375,4.400069375,1.46657234375C4.533409375,1.46657234375,4.600069375,1.53323234375,4.666739375,1.53323234375L7.066739375,3.99990234375L4.000069375,7.06657234375L3.133409375,6.19990234375ZM6.066739375,13.06660234375Q6.000069375,13.13320234375,5.933409375,13.13320234375L1.866739375,14.59990234375C1.733409375,14.66660234375,1.600069375,14.59990234375,1.533409375,14.46660234375C1.466739375,14.39990234375,1.466739375,14.33320234375,1.466739375,14.19990234375L2.933409375,10.13323234375C2.933409375,10.06657234375,3.000069375,10.06657234375,3.000069375,9.99990234375L4.466739375,8.53324234375L8.466739375,4.53323234375L9.800069375,3.19990234375L12.866709375,6.26657234375L11.533409375,7.59990234375L7.533409375,11.59990234375L6.066739375,13.06660234375ZM14.466709375,11.86660234375L11.866709375,14.46660234375C11.733409375,14.59990234375,11.533409375,14.59990234375,11.400109375,14.46660234375L10.533409375,13.59990234375L11.733409375,12.39990234375C11.933409375,12.19990234375,11.933409375,11.86660234375,11.733409375,11.66660234375C11.533409375,11.46660234375,11.200109375,11.46660234375,11.000109375,11.66660234375L9.800069375,12.86660234375L8.933409375,11.99990234375L12.000109375,8.93323234375L14.466709375,11.39990234375C14.600109375,11.53320234375,14.600109375,11.73320234375,14.466709375,11.86660234375Z" fill="currentColor"/></g></g></svg>
                                    {t('waxberryPlaza.customized')}
                                </div>
                                <div className={selectMenu==="discuss"?"menu menu-active":"menu"} onClick={()=>this.menuChange("discuss")}>
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_721_87407"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_721_87407)"><g><path d="M9.81443,5.884765625L3.227887,5.884765625C2.894624,5.884765625,2.625,6.154389625,2.625,6.487652625C2.625,6.820915625,2.894624,7.090535625,3.227887,7.090535625L9.81443,7.090535625C10.14769,7.090535625,10.41731,6.820915625,10.41731,6.487652625C10.41731,6.154389625,10.14769,5.884765625,9.81443,5.884765625ZM7.10813,8.440335625L3.227887,8.440335625C2.894624,8.440335625,2.625,8.709965625,2.625,9.043225625C2.625,9.376485625,2.894624,9.646105625,3.227887,9.646105625L7.10646,9.646105625C7.43972,9.646105625,7.70935,9.376485625,7.70935,9.043225625C7.70935,8.709965625,7.4414,8.440335625,7.10813,8.440335625Z" fill="currentColor"/></g><g><path d="M14.33933984375,1.451171875L7.49325984375,1.451171875C6.86525984375,1.451171875,6.35614984375,1.9619508749999999,6.35614984375,2.588281875L6.35614984375,3.425621875L1.87301984375,3.425621875C1.14285384375,3.425621875,0.54833984375,4.020141875,0.54833984375,4.750301875L0.54833984375,11.207891875C0.54833984375,11.938071875,1.14285384375,12.532571875,1.87301984375,12.532571875L2.59480984375,12.532571875C2.46250984375,13.197371875,2.3402498437499997,13.818771875,2.33857984375,13.827071875C2.29168984375,14.066571875,2.39383984375,14.311071875,2.59815984375,14.446771875C2.69863984375,14.513771875,2.81418984375,14.547171875,2.92973984375,14.547171875C3.04864984375,14.547171875,3.16586984375,14.512071875,3.26969984375,14.443371875L6.07479984375,12.534271875L11.12063984375,12.534271875C11.85083984375,12.534271875,12.44533984375,11.939771875,12.44533984375,11.209571875L12.44533984375,8.508301875L14.33933984375,8.508301875C14.96733984375,8.508301875,15.47653984375,7.997521875,15.47653984375,7.371191875L15.47653984375,2.588281875C15.47813984375,1.9619508749999999,14.96733984375,1.451171875,14.33933984375,1.451171875ZM11.23953984375,11.209571875C11.23953984375,11.274881875,11.18593984375,11.328471875,11.12063984375,11.328471875L5.88890984375,11.328471875C5.76833984375,11.328471875,5.64942984375,11.365311875,5.54894984375,11.432301875L3.80727984375,12.617971875C3.84579984375,12.423671875,3.88430984375,12.229471875,3.92115984375,12.048571875C3.95632984375,11.871071875,3.91110984375,11.688571875,3.79555984375,11.547871875C3.67999984375,11.407181875,3.50918984375,11.326791875,3.32998984375,11.326791875L1.87468984375,11.326791875C1.80937984375,11.326791875,1.75578984375,11.273201875,1.75578984375,11.207891875L1.75578984375,4.751981875C1.75578984375,4.686661875,1.80937984375,4.633071875000001,1.87468984375,4.633071875000001L11.12063984375,4.633071875000001C11.18593984375,4.633071875000001,11.23953984375,4.686661875,11.23953984375,4.751981875L11.23953984375,11.209571875ZM14.27243984375,7.302521875L12.44533984375,7.302521875L12.44533984375,4.751981875C12.44533984375,4.021811875,11.85083984375,3.427301875,11.12063984375,3.427301875L7.56192984375,3.427301875L7.56192984375,2.6569418750000002L14.27243984375,2.6569418750000002L14.27243984375,7.302521875Z" fill="currentColor"/></g></g></svg>
                                    {t('discuss.title')}
                                </div>
                                <div className={selectMenu==="content"?"menu menu-active":"menu"} onClick={()=>this.menuChange("content")}>
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_721_86068"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_721_86068)"><g><g><path d="M9.23953445602417,5.123295Q9.24973445602417,5.0620696,9.24973445602417,5Q9.24973445602417,4.9261315,9.23532445602417,4.853682Q9.22091445602417,4.781233,9.19264445602417,4.712987Q9.16437445602417,4.644742,9.12333445602417,4.583322Q9.08230445602417,4.521903,9.03006445602417,4.46967Q8.97783445602417,4.417437,8.91641445602417,4.376398Q8.85499445602417,4.335359,8.78674445602417,4.30709Q8.71850445602417,4.278822,8.64605445602417,4.264411Q8.57360445602417,4.25,8.49973645602417,4.25Q8.43367645602417,4.25,8.36863345602417,4.261548Q8.30359045602417,4.273095,8.24156845602417,4.295835Q8.17954545602417,4.318574,8.12245245602417,4.351806Q8.06535945602417,4.385037,8.01495445602417,4.427736Q7.96454945602417,4.470436,7.92238445602417,4.521289Q7.88021945602417,4.572143,7.84759245602417,4.629584Q7.81496645602417,4.687025,7.79288345602417,4.749284Q7.77080045602417,4.811544,7.75994045602417,4.876705L7.75990545602417,4.876916L6.75997845602417,10.8767Q6.74977445602417,10.93793,6.74977445602417,11Q6.74977445602417,11.07387,6.76418545602417,11.14632Q6.77859645602417,11.21877,6.80686445602417,11.28701Q6.83513345602417,11.355260000000001,6.87617245602417,11.41668Q6.9172114560241695,11.478100000000001,6.96944445602417,11.53033Q7.02167745602417,11.58256,7.08309645602417,11.6236Q7.14451645602417,11.66464,7.21276145602417,11.692910000000001Q7.28100745602417,11.72118,7.35345645602417,11.73559Q7.42590595602417,11.75,7.49977445602417,11.75Q7.5658345560241695,11.75,7.63087745602417,11.73845Q7.69592045602417,11.7269,7.75794345602417,11.70416Q7.8199664560241695,11.681429999999999,7.87705945602417,11.64819Q7.93415245602417,11.61496,7.98455745602417,11.57226Q8.03496245602417,11.52956,8.07712745602417,11.47871Q8.11929245602417,11.427859999999999,8.15191845602417,11.37042Q8.18454445602417,11.31297,8.20662745602417,11.250720000000001Q8.22871045602417,11.18846,8.23957045602417,11.12329L8.239595456024169,11.12314L9.23949445602417,5.123505L9.23953445602417,5.123295L9.23953445602417,5.123295Z" fill="currentColor"/></g><g><path d="M12.004713533569335,4.445133L15.004512533569336,7.1723300000000005Q15.005652533569336,7.173360000000001,15.006782533569336,7.1744Q15.061232533569335,7.22431,15.104902533569335,7.2838899999999995Q15.148572533569336,7.34347,15.179782533569336,7.41042Q15.210992533569335,7.4773700000000005,15.228532533569336,7.54913Q15.246082533569336,7.62088,15.249292533569335,7.69468Q15.252502533569336,7.76848,15.241252533569336,7.84149Q15.230002533569337,7.91449,15.204722533569337,7.9839Q15.179452533569336,8.05331,15.141122533569336,8.11646Q15.102792533569335,8.1796,15.052872533569335,8.23406L12.053263533569336,11.50648L12.052987533569336,11.50678Q11.946444533569336,11.62302,11.802116533569336,11.68651Q11.657788533569336,11.75,11.500112533569336,11.75Q11.426244033569336,11.75,11.353794533569335,11.73559Q11.281345533569336,11.72118,11.213099533569336,11.692910000000001Q11.144854533569337,11.66464,11.083434533569337,11.6236Q11.022015533569336,11.58256,10.969782533569337,11.53033Q10.917549533569336,11.478100000000001,10.876510533569336,11.41668Q10.835471533569336,11.355260000000001,10.807202533569336,11.28701Q10.778934533569336,11.21877,10.764523533569335,11.14632Q10.750112533569336,11.07387,10.750112533569336,11Q10.750112533569336,10.85927,10.801128533569337,10.728110000000001Q10.852145533569336,10.59696,10.947237533569336,10.49322L13.438262533569336,7.77563L10.995683533569336,5.5550239999999995L10.995597533569336,5.554946Q10.878335533569336,5.44834,10.814224533569336,5.303409Q10.750112533569336,5.158478,10.750112533569336,5Q10.750112533569336,4.9261315,10.764523533569335,4.853682Q10.778934533569336,4.781233,10.807202533569336,4.712987Q10.835471533569336,4.644742,10.876510533569336,4.583322Q10.917549533569336,4.521903,10.969782533569337,4.46967Q11.022015533569336,4.417437,11.083434533569337,4.376398Q11.144854533569337,4.335359,11.213099533569336,4.30709Q11.281345533569336,4.278822,11.353794533569335,4.264411Q11.426244033569336,4.25,11.500112533569336,4.25Q11.640047533569335,4.25,11.770566533569337,4.300461Q11.901086533569336,4.350922,12.004627533569336,4.445054L12.004713533569335,4.445133Z" fill="currentColor"/></g><g><path d="M5.0044,5.554946Q5.12166,5.44834,5.185779999999999,5.303409Q5.249890000000001,5.158478,5.249890000000001,5Q5.249890000000001,4.9261315,5.23548,4.853682Q5.22106,4.781233,5.1928,4.712987Q5.16453,4.644742,5.12349,4.583322Q5.08245,4.521903,5.03022,4.46967Q4.9779800000000005,4.417437,4.9165600000000005,4.376398Q4.8551400000000005,4.335359,4.7869,4.30709Q4.71865,4.278822,4.6462,4.264411Q4.57376,4.25,4.499890000000001,4.25Q4.3599499999999995,4.25,4.22943,4.300461Q4.09891,4.350922,3.99537,4.445054L3.99517,4.445237L0.995485,7.1723300000000005Q0.994349,7.173360000000001,0.993217,7.1744Q0.938763,7.22431,0.895094,7.2838899999999995Q0.851425,7.34347,0.820217,7.41042Q0.78901,7.4773700000000005,0.771464,7.54913Q0.753919,7.62088,0.750709,7.69468Q0.747499,7.76848,0.758748,7.84149Q0.769997,7.91449,0.795273,7.9839Q0.820549,8.05331,0.85888,8.11646Q0.897211,8.1796,0.947125,8.23406L3.94674,11.50648L3.94701,11.50678Q4.05356,11.62302,4.19788,11.68651Q4.34221,11.75,4.499890000000001,11.75Q4.57376,11.75,4.6462,11.73559Q4.71865,11.72118,4.7869,11.692910000000001Q4.8551400000000005,11.66464,4.9165600000000005,11.6236Q4.9779800000000005,11.58256,5.03022,11.53033Q5.08245,11.478100000000001,5.12349,11.41668Q5.16453,11.355260000000001,5.1928,11.28701Q5.22106,11.21877,5.23548,11.14632Q5.249890000000001,11.07387,5.249890000000001,11Q5.249890000000001,10.85927,5.198869999999999,10.728110000000001Q5.14785,10.59696,5.05276,10.49322L2.56174,7.77563L5.0042,5.555128L5.0044,5.554946L5.0044,5.554946Z" fill="currentColor" /></g></g></g></svg>
                                    {t('waxberryForm.details')}
                                </div>
                                <div className="operate"/>
                            </div>
                            <div className="footer-content">
                                {selectMenu==="detail" && waxberryObj.detail && <MarkdownRenderer content={waxberryObj.detail} className="markdown-content-detail"/>}
                                {selectMenu==="discuss" && <CommentList context={waxberryObj}/>}
                                {selectMenu==="content" && <div className="codeDiv">
                                    <div className="codeTree">
                                        <Tree
                                            expandedKeys={expandedKeys}
                                            selectedKeys={selectedKeys}
                                            onSelect={this.treeSelect.bind(this)}
                                            onExpand={this.treeExpand.bind(this)}
                                        >
                                            {loop(codeTreeData)}
                                        </Tree>
                                    </div>
                                    <div className="codeData">
                                        <CodeEditor
                                            value={codeData}
                                            language={monacoLanguage}
                                            readOnly={true}
                                        />
                                    </div>
                                </div>}
                            </div>
                        </div>
                    </div>
                </div>
                {showCustomModal && <div className="custom-modal">
                    <div className="custom-modal-box">
                        <div className="custom-modal-title">
                            <span>{t('waxberryPlaza.customizeWaxberry')}</span>
                            <CloseOutlined onClick={this.hideCustomModal.bind(this)}/>
                        </div>
                        <div className="custom-modal-content">{t('waxberryPlaza.customizeWaxberryPrompt')}</div>
                        <div className="custom-modal-footer">
                            <div className="ok" onClick={this.customModalOk.bind(this)}>{t('confirm')}</div>
                            <div className="close" onClick={this.hideCustomModal.bind(this)}>{t('cancel')}</div>
                        </div>
                    </div>
                </div>}
            </div>
        );
    }
}
export default withTranslation()(App);
